<template>
  <div class="customer-query-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>体检信息录入</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 根据编号查询患者 -->
    <div style="margin-top: 20px;">
      <el-descriptions class="margin-top" title="体检信息查询" :column="3" size="default" border>
        <template #extra>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              订单编号
            </div>
          </template>
          <el-input v-model="searchForm.id" placeholder="输入体检编号" />
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 患者基础信息 -->
    <div style="margin-top: 20px;">
      <el-descriptions class="margin-top" title="客户基本信息" :column="3" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              订单编号
            </div>
          </template>
          {{ customerInfo.orderId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              手机号码
            </div>
          </template>
          {{ customerInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
          {{ customerInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              性别
            </div>
          </template>
          {{ customerInfo.gender }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              套餐类型
            </div>
          </template>
          {{ customerInfo.packageType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              体检日期
            </div>
          </template>
          {{ customerInfo.examDate }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 套餐检查 -->
    <div class="demo-collapse" style="margin-top: 20px;">
      <h4>检查录入</h4>
      <el-collapse v-model="activeNames" @change="handleChange">
        <!-- 一般检查基础项目 -->
        <el-collapse-item title="一般检查基础项目" name="1" style="font-weight: bold;">
          <div>
            <el-descriptions class="margin-top" :column="2" size="default" border>
              <el-descriptions-item label="身高">
                <input class="myinput" type="text" v-model="examForm.height" placeholder="请输入身高" />cm
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="体重">
                <input class="myinput" type="text" v-model="examForm.weight" placeholder="请输入体重" />kg
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="体重指数">
                <el-text class="mx-1" type="warning">22.9</el-text>
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                <el-button type="danger" size="small" style="margin-left: 20px;">异</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="脉搏">
                <input class="myinput" type="text" v-model="examForm.pulse" placeholder="请输入脉搏" />次/分钟
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="收缩压" label-visible="false">
                <input class="myinput" type="text" v-model="examForm.systolicPressure" placeholder="请输入收缩压" />
                <el-tag size="small">正常值范围：-</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="舒张压">
                <input class="myinput" type="text" v-model="examForm.diastolicPressure" placeholder="请输入舒张压" />
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <!-- 科室小结 -->
            <div style="margin-top: 20px;">
              <font>科室小结</font>
              <el-descriptions class="margin-top" :column="1" size="default" border style="margin-top: 20px;">
                <el-descriptions-item label="科室小结">
                  <el-input v-model="examForm.departmentSummary" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                    placeholder="科室小结：超重" />
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!-- 责任医生 -->
            <div style="margin-top: 20px;">
              <font>责任医生</font>
              <el-descriptions class="margin-top" :column="3" size="default" border style="margin-top: 20px;">
                <el-descriptions-item label="录入医师">
                  <input class="myinput" type="text" v-model="examForm.inputDoctor" placeholder="请输入录入医师姓名" />
                </el-descriptions-item>
                <el-descriptions-item label="责任医师">
                  <input class="myinput" type="text" v-model="examForm.responsibleDoctor" placeholder="请输入责任医师姓名" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <el-button type="primary" @click="onSubmitBasicExam">一般检查基础项数据保存</el-button>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-collapse-item>

        <!-- 视力+辨色力 -->
        <el-collapse-item title="视力+辨色力" name="2">
          <div>
            <el-descriptions class="margin-top" :column="2" size="default" border>
              <el-descriptions-item label="色觉检查">
                <el-select v-model="examForm.colorVision" class="m-2" placeholder="输入正确数据">
                  <el-option v-for="item in colorVisionOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item></el-descriptions-item>
              <el-descriptions-item label="右眼裸眼视力">
                <input class="myinput" type="text" v-model="examForm.rightEyeNakedVision" placeholder="请输入右眼裸视力" />
                <el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="左眼裸眼视力">
                <input class="myinput" type="text" v-model="examForm.leftEyeNakedVision" placeholder="请输入左眼裸视力" />
                <el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="右眼矫正视力">
                <el-input v-model="examForm.rightEyeCorrectedVision" placeholder="请输入矫正视力" />
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="左眼矫正视力" label-visible="false">
                <input class="myinput" type="text" v-model="examForm.leftEyeCorrectedVision" placeholder="请输入矫正视力" />
                <el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <!-- 科室小结 -->
            <div style="margin-top: 20px;">
              <font>科室小结</font>
              <el-descriptions class="margin-top" :column="1" size="default" border style="margin-top: 20px;">
                <el-descriptions-item label="科室小结">
                  <el-input v-model="examForm.visionDepartmentSummary" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                    placeholder="科室小结：双眼屈光不正" />
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!-- 责任医生 -->
            <div style="margin-top: 20px;">
              <font>责任医生</font>
              <el-descriptions class="margin-top" :column="3" size="default" border style="margin-top: 20px;">
                <el-descriptions-item label="录入医师">
                  <input class="myinput" type="text" v-model="examForm.visionInputDoctor" placeholder="请输入录入医师姓名" />
                </el-descriptions-item>
                <el-descriptions-item label="责任医师">
                  <input class="myinput" type="text" v-model="examForm.visionResponsibleDoctor" placeholder="请输入责任医师姓名" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <el-button type="primary" @click="onSubmitVisionExam">视力+辨色力数据保存</el-button>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="血常规24项" name="3">
          <div>
            血常规24项具体录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="肝功四项" name="4">
          <div>
            肝功四项录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="肾功能三项" name="5">
          <div>
            肾功能三项录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="血脂四项" name="6">
          <div>
            血脂四项录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="尿常规24项" name="7">
          <div>
            尿常规24项录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="颈动脉彩超" name="8">
          <div>
            颈动脉彩超录入页面
          </div>
        </el-collapse-item>
        <el-collapse-item title="头部CT" name="9">
          <div>
            头部CT录入页面
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const searchForm = reactive({
  id: ''
})

const customerInfo = reactive({
  orderId: '202310253212565',
  phone: '213100000000',
  name: '张一山',
  gender: '女',
  packageType: '23东软家属已婚女士套餐D',
  examDate: '2023-10-12'
})

const examForm = reactive({
  height: '',
  weight: '',
  pulse: '',
  systolicPressure: '',
  diastolicPressure: '',
  departmentSummary: '',
  inputDoctor: '',
  responsibleDoctor: '',
  colorVision: '',
  rightEyeNakedVision: '',
  leftEyeNakedVision: '',
  rightEyeCorrectedVision: '',
  leftEyeCorrectedVision: '',
  visionDepartmentSummary: '',
  visionInputDoctor: '',
  visionResponsibleDoctor: ''
})

const colorVisionOptions = [
  { value: '正常', label: 'OK' },
  { value: '红绿色盲', label: 'honglv' },
  { value: '色弱', label: 'seruo' }
]

const activeNames = ref(['1'])

const handleSearch = () => {
  console.log('执行查询逻辑', searchForm)
  // 在这里添加实际的查询逻辑
}

const handleChange = (val) => {
  console.log('折叠面板状态改变', val)
}

const onSubmitBasicExam = () => {
  console.log('提交一般检查基础项数据', examForm)
  // 在这里添加实际的数据保存逻辑
}

const onSubmitVisionExam = () => {
  console.log('提交视力+辨色力数据', examForm)
  // 在这里添加实际的数据保存逻辑
}

</script>

<style scoped>
.customer-query-container {
  padding: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.myinput {
  width: 300px;
  height: 22px;
  margin-right: 20px;
}
</style> 